<template>
  <a-button type="primary" @click="state.open = true">
    <plus-outlined />
    新建
  </a-button>
  <a-modal v-model:open="state.open" title="新建客户" :width="480" :body-style="{ paddingBottom: 0 }">
    <a-form layout="vertical"
            ref="formRef"
            :model="form"
            :rules="rules"
            name="customerForm">
      <a-form-item label="客户名称" name="name">
        <a-input placeholder="请输入客户完整名称" v-model:value="form.name" show-count :maxlength="30" />
      </a-form-item>
      <template v-if="state.showMoreForm">
        <a-form-item label="客户类型" name="type">
          <a-select v-model:value="form.type" />
        </a-form-item>
        <a-row :gutter="20">
          <a-col :span="10">
            <a-form-item label="联系人" name="linkman">
              <a-input placeholder="请输入联系人" />
            </a-form-item>
          </a-col>
          <a-col :span="14">
            <a-form-item label="手机号码" name="mobile">
              <a-input-number :controls="false" class="width-max" placeholder="请输入联系人手机号码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="客户地址" name="address">
          <a-input placeholder="亲输入客户详细地址" v-model:value="form.address" />
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-textarea v-model:value="form.remark" />
        </a-form-item>
      </template>
    </a-form>
    <template #footer>
      <a-flex justify="space-between" align="center">
        <div @click="showMoreForm">
          <a-button type="link" block v-if="state.showMoreForm">快捷添加客户<up-outlined class="font-size-ssm" /></a-button>
          <a-button type="link" block v-else>完善更多信息<down-outlined class="font-size-ssm" /></a-button>
        </div>
        <a-space>
          <a-button @click="onClose">取消</a-button>
          <a-button :loading="state.loading" type="primary" @click="onSubmit">保存</a-button>
        </a-space>
      </a-flex>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { PlusOutlined, DownOutlined, UpOutlined } from "@ant-design/icons-vue";
import { FormInstance } from 'ant-design-vue';
import { Rule } from 'ant-design-vue/es/form';

const state = reactive({
  open: <boolean>false,
  loading: <boolean>false,
  showMoreForm: <boolean>false
})
const formRef = ref<FormInstance>()

const form = reactive({
  type: <number>0,
  name: '',
  contacts: [],
  address: '',
  tags: [],
  remark: ''
})
const rules: Record<string, Rule[]> = {
  name: [
    { required: true, message: '客户名称不能为空 ' },
    { min: 2, max: 20, message: '客户名称请大于2个字少于20个字' }
  ]
}

const onClose = () => {
  formRef.value?.resetFields()
  state.open = false
}

const onSubmit = () => {
  formRef.value?.validate()
    .then(async () => {
      state.loading = true
    })
    .catch(err => console.log(err))

}

const showMoreForm = () => {
  state.showMoreForm = !state.showMoreForm
}
</script>